<template>
	<view class="wrap">
		<u-toast ref="uToast" />
		<view class="lunbo">
			<u-swiper :list="list" height="480" @click="previewImage" name="imgurl" :title="istitle" :title-style="titlestyle" :effect3d="isd"></u-swiper>
			<view class="comment"><text>{{commentdetail.totalrate?commentdetail.totalrate+'分':0+'分'}}</text>
				<text @click="gocomment">{{commentdetail.count?commentdetail.count:0}}评价></text>
			</view>

		</view>
		<view style="transform: translateY(-100rpx);">
			<u-card :show-head="false" :box-shadow="color" padding="15">
				<view class="" slot="body">
					<view class="u-body-item u-border-bottom  u-p-t-0">
						<view class="u-body-item-title u-line-2">
							<h6 class="text">{{appname}}</h6>
						</view>
						<view class="u-flex u-row-between">
							<view class="text">
								<u-tag :text="i" mode="light" :type="colorlist[Math.floor(Math.random()*tag.length)]" size="mini" v-for="(i,index) in tag" :key="'tag'+index" style="margin-right:10rpx"/>
								<!-- <u-tag text="江湖菜" type="warning" mode="light" size="mini" /> -->
							</view>
							<view class="text" @click="godetail">详情></view>
						</view>
					</view>
					<view class="u-body-item u-flex u-row-between u-p-b-0">
						<view class="u-body-item-title u-line-2" @tap="opentable">选择桌位</view>
						<view @tap="opentable">></view>
					</view>
				</view>
			</u-card>
		</view>
		<view style="margin-top: -120rpx;">
			<u-dropdown border-bottom>
				<u-dropdown-item v-model="value1" title="排序" :options="options1" @change="changesort"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="类型" :options="options2"></u-dropdown-item>
			</u-dropdown>
		</view>
		<!-- 折扣产品 -->
		<view class="recommend" v-if="value2 == 1">今日推荐<image src="../../static/rec.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
		</view>
		<view class="recommend" v-else>今日折扣<image src="../../static/disc.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
		</view>
		<view id="bbb" class="index-pb" v-if="value2 == 1">
			<div id="vm" class="pubu" v-cloak>
				<!-- 左边的瀑布 -->
				<ul class="yg yg_l">
					<li v-for="(item,index) in recomendList" :key="index" v-if="index%2==0">
						<view class="" @tap="godishdetail(item._id)">
							<div>
								<u-image :src="item.imgurl" width="100%" height="300rpx"><u-loading slot="loading"></u-loading></u-image>
							</div>
							<view class="u-flex u-row-between">
								<p class="tit">{{ item.name }}</p>
								<p class="tit" style="text-align: center;color:#FD395B;">销量:{{ item.salecount }}</p>
							</view>
							<p class="tit">好评率:{{item.salecount!=0?((item.goodnum/item.salecount)*100).toFixed(1):0}}%</p>
						</view>
						<p class="price">
							<text v-if="item.rowprice!=item.nowprice" class="price-l fw700 fs26" style="text-decoration: line-through;">￥{{ item.rowprice }}</text>
							<text class="price-l fw700 fs26">￥{{ item.nowprice }}</text>
							<view class="pb-car iconfont" :id="item._id" :data-img="item.imgurl" @tap="addShopCar">
								<image src="../../static/ic_add@2x.png" @click="handleSelect(item, $event)"></image>
							</view>
						</p>
					</li>
				</ul>
				<!-- 右边的瀑布 -->
				<ul class="yg yg_r">
					<li v-for="(item,index) in recomendList" :key="index" v-if="index%2==1">
						<view class="" @tap="godishdetail(item._id)">
							<div>
								<!-- <image :src="item.imgurl" mode="scaleToFill"></image> -->
								<u-image :src="item.imgurl" width="100%" height="300rpx"><u-loading slot="loading"></u-loading></u-image>
							</div>
							<view class="u-flex u-row-between">
								<p class="tit">{{ item.name }}</p>
								<p class="tit" style="text-align: center;color:#FD395B;">销量:{{ item.salecount }}</p>
							</view>
							<p class="tit">好评率:{{item.salecount!=0?((item.goodnum/item.salecount)*100).toFixed(1):0}}%</p>
						</view>
						<p class="price">
							<text v-if="item.rowprice!=item.nowprice" class="price-l fw700 fs26" style="text-decoration: line-through;">￥{{ item.rowprice }}</text>
							<text class="price-l fw700 fs26">￥{{ item.nowprice }}</text>
							<view class="pb-car iconfont" :id="item._id" :data-img="item.imgurl" @tap="addShopCar">
								<image src="../../static/ic_add@2x.png" @click="handleSelect(item, $event)"></image>
							</view>
						</p>
					</li>
				</ul>
				<div style="clear: both;"></div>
			</div>
			<!-- 加入购物车动画 cartx 和 carty 是购物车位置在屏幕位置的比例 例如左上角x0.1 y0.1 右下角 x0.9 y0.9-->
			<shopCarAnimation ref="carAnmation" cartx="0.48" carty="1.1"></shopCarAnimation>
		</view>
		<!-- 今日折扣 -->
		<view id="bbb" class="index-pb" v-else>
			<div id="vm" class="pubu" v-cloak>
				<!-- 左边的瀑布 -->
				<ul class="yg yg_l">
					<li v-for="(item,index) in discountlist" :key="index" v-if="index%2==0">
						<view class="" @tap="godishdetail(item._id)">
							<div>
								<!-- <image :src="item.imgurl" mode="scaleToFill"></image> -->
								<u-image :src="item.imgurl" width="100%" height="300rpx"><u-loading slot="loading"></u-loading></u-image>
							</div>
							<view class="u-flex u-row-between">
								<p class="tit">{{ item.name }}</p>
								<p class="tit" style="text-align: center;color:#FD395B;">销量:{{ item.salecount }}</p>
							</view>
							<p class="tit">好评率:{{((item.goodnum/item.salecount)*100).toFixed(1)}}%</p>
						</view>
						<p class="price">
							<text v-if="item.rowprice!=item.nowprice" class="price-l fw700 fs26" style="text-decoration: line-through;">￥{{ item.rowprice }}</text>
							<text class="price-l fw700 fs26">￥{{ item.nowprice }}</text>
							<view class="pb-car iconfont" :id="item._id" :data-img="item.imgurl" @tap="addShopCar">
								<image src="../../static/ic_add@2x.png" @click="handleSelect(item, $event)"></image>
							</view>
						</p>
					</li>
				</ul>
				<!-- 右边的瀑布 -->
				<ul class="yg yg_r">
					<li v-for="(item,index) in discountlist" :key="index" v-if="index%2==1">
						<view class="" @tap="godishdetail(item._id)">
							<div>
								<!-- <image :src="item.imgurl" mode="scaleToFill"></image> -->
								<u-image :src="item.imgurl" width="100%" height="300rpx"><u-loading slot="loading"></u-loading></u-image>
							</div>
							<view class="u-flex u-row-between">
								<p class="tit">{{ item.name }}</p>
								<p class="tit" style="text-align: center;color:#FD395B;">销量:{{ item.salecount }}</p>
							</view>
							<p class="tit">好评率:{{((item.goodnum/item.salecount)*100).toFixed(1)}}%</p>
						</view>
						<p class="price">
							<text v-if="item.rowprice!=item.nowprice" class="price-l fw700 fs26" style="text-decoration: line-through;">￥{{ item.rowprice }}</text>
							<text class="price-l fw700 fs26">￥{{ item.nowprice }}</text>
							<view class="pb-car iconfont" :id="item._id" :data-img="item.imgurl" @tap="addShopCar">
								<image src="../../static/ic_add@2x.png" @click="handleSelect(item, $event)"></image>
							</view>
						</p>
					</li>
				</ul>
				<div style="clear: both;"></div>
			</div>
			<!-- 加入购物车动画 cartx 和 carty 是购物车位置在屏幕位置的比例 例如左上角x0.1 y0.1 右下角 x0.9 y0.9-->
			<shopCarAnimation ref="carAnmation" cartx="0.48" carty="1.1"></shopCarAnimation>
		</view>
		<u-divider color="#9ea4aa;" half-width="200" border-color="#9ea4aa" bg-color="transparent">没有更多了</u-divider>
		<!-- 弹出 -->
		<popup position="center" width="600rpx" borderRadius="10rpx" :isVisible.sync="typeVisible">
			<view class="orderDishes-type">
				<view v-if="selectDishes">
					<!-- <image :src="selectDishes.imgurl"></image> -->
					<u-image :src="selectDishes.imgurl" width="190" height="125" :border-radius="10"></u-image>
					<view>
						<view>{{ selectDishes.name }}</view>
						<view>￥{{ selectDishes.nowprice }}</view>
					</view>
				</view>
				<checkBox ref="box" v-for="(item, index) in typeList" :key="index" :data="item.child" :value="type[index]" :title="item.name"
				 name="value" id="value"></checkBox>
				<text v-if="typeList.length==0">该菜品暂无规格可选</text>
			</view>
			<view class="orderDishes-add" @tap="handleAdd">加入购物车</view>
		</popup>

	</view>
</template>

<script>
	//  加入购物车动画组件
	import shopCarAnimation from '@/components/fly-in-cart/fly-in-cart.vue'
	import popup from '../../components/popup.vue';
	import checkBox from '../../components/checkBox.vue';
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				appname:'',
				colorlist:['success','warning','error','primary'],
				istitle:true,
				isd:true,
				titlestyle:{
					'padding':'68rpx',
					'color':"#ffffff"
				},
				eposition:null,
				typeList:[{
							"id": 12,
							"name": "辣度",
							"level": 2,
							"child": [{
								"id": 15,
								"name": "变态辣",
								"level": 3,
								"child": []
							}, {
								"id": 14,
								"name": "中辣",
								"level": 3,
								"child": []
							}, {
								"id": 13,
								"name": "微辣",
								"level": 3,
								"child": []
							}]
						}, {
							"id": 8,
							"name": "口味",
							"level": 2,
							"child": [{
								"id": 11,
								"name": "椒盐",
								"level": 3,
								"child": []
							}, {
								"id": 10,
								"name": "孜然",
								"level": 3,
								"child": []
							}, {
								"id": 9,
								"name": "蒜香",
								"level": 3,
								"child": []
							}]
						}, {
							"id": 5,
							"name": "分量",
							"level": 2,
							"child": [{
								"id": 7,
								"name": "小份",
								"level": 3,
								"child": []
							}, {
								"id": 6,
								"name": "大份",
								"level": 3,
								"child": []
							}]
						}],
				type: [],
				selectDishes: null,
				typeVisible:false,
				value1: 1,
				value2: 1,
				options1: [
					{
							label: '默认排序',
							value: 1,
						},
					{
						label: '好评优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					},
					{
						label: '销量优先',
						value: 4,
					}
				],
				options2: [{
						label: '今日推荐',
						value: 1,
					},
					{
						label: '今日折扣',
						value: 2,
					},
				],
				color: '1px 1px 10px #333333',
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				recomendList: [],
				discountlist: [],
				commentdetail:{},
				tag:[]
			}
		},
		onLoad() {

		},
		onShow() {
			let account = JSON.parse(uni.getStorageSync('currentUser')).account
			if(uni.getStorageSync(account+'vuexstate')){
				let detail=JSON.parse(uni.getStorageSync(account+'vuexstate')).tabledetail
				this.SET_TABLE([detail.tablenumber,detail.personnum,detail.tablefee])
			}
			if(uni.getStorageSync(account+'orderList')){
				let a=JSON.parse(uni.getStorageSync(account+'orderList')).length+''
				uni.setTabBarBadge({
				  index: 1,
				  text: a
				})
			}else{
				uni.removeTabBarBadge({
					index: 1
				})
			}
		},
		computed: {
			...mapState(['orderList', 'orderData','tabledetail'])
		},
		components: {
			shopCarAnimation,
			popup,
			checkBox
		},
		created() {
			this.getrecommtdish()
			this.getdiscountdish()
			this.getcommentinfo()
			this.getlunbo()
		},
		methods: {
			...mapMutations(['SET_TABLE']),
			getlunbo(){
				this.$u.post('/baseinfo/getBaseinfo').then(res=>{
					console.log(res);
					this.list=res.data.baseinfolist.carousel
					this.tag=res.data.baseinfolist.label
					this.appname=res.data.baseinfolist.name
					console.log(res);
				})
			},
			changesort(val){
				let sortlist
				if(this.value2==1){
					if(val==1){
						
					}else if(val==2){
						this.recomendList= this.recomendList.sort((a,b)=>(b.goodnum/b.salecount)-(a.goodnum/a.salecount))
						console.log(this.recomendList);
					}else if(val==3){
						this.recomendList= this.recomendList.sort((a,b)=>a.nowprice-b.nowprice)
					}else if(val==4){
						this.recomendList= this.recomendList.sort((a,b)=>b.salecount-a.salecount)
					}
				}else if(this.value2==2){
					if(val==1){
					}else if(val==2){
						this.discountlist= this.discountlist.sort((a,b)=>(b.goodnum/b.salecount)-(a.goodnum/a.salecount))
						console.log(this.discountlist);
					}else if(val==3){
						this.discountlist= this.discountlist.sort((a,b)=>a.nowprice-b.nowprice)
					}else if(val==4){
						this.discountlist= this.discountlist.sort((a,b)=>b.salecount-a.salecount)
					}
					
				}
				
			},
			getcommentinfo(){
				this.$u.post('/comment/getCommentInfo').then(res=>{
					this.commentdetail=res.data
				})
			},
			onPullDownRefresh() {
				this.getrecommtdish()
				this.getdiscountdish()
				this.getlunbo()
				this.getcommentinfo()
				let that = this
				setTimeout(() => {
					uni.stopPullDownRefresh();
					that.$refs.uToast.show({
						title: '刷新成功',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'success',
						duration: 1000,
						position: "top"
						// 如果不需要图标，请设置为false
						// icon: false
					})
				}, 200);
			},
			godishdetail(id){
				console.log(id,'dianji');
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: '../detail/detail?id='+id,
					animationType: 'pop-in',
					animationDuration: 200
				})
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: '../detail/detail?id='+id
				})
				// #endif
			},
			...mapActions(['CHANGE_COUNT', 'CLEAN_DISHES']),
			handleSelect(row, e) {
				this.selectDishes = row;
				this.typeList=row.options[0].child
				this.typeVisible = true;
				if(this.typeList.length!=0){
					this.$refs.box.map((item, index) => {
						this.$refs.box[index].value = '';
					});
				}
				
			},
			handleAdd() {
				if(this.typeList.length!=0){
					this.type = this.$refs.box.map((item, index) => {
						return this.$refs.box[index].value;
					});
				}
				let row
				setTimeout(() => {
					if (true) {
						 row = {
							count: 1,
							...this.selectDishes,
							type: this.type.filter(Boolean).join('、')
						};
					}
					this.CHANGE_COUNT({
						row: row,
						type: true
					});
				}, 500);
				this.$refs.carAnmation.touchOnGoods(this.eposition);
				this.typeVisible = false;
				this.eposition=null
			},
			getdiscountdish() {
				this.$u.post('/dishes/getdiscount').then(res => {
							if (res.data.code == 200) {
								this.discountlist = res.data.data
							} else {
								uni.showToast({
									icon: 'none',
									title: '获取数据失败！'
								});
							}
						})

					},
					getrecommtdish() {
						this.$u.post('/dishes/getrecommend').then(res => {
							if (res.data.code == 200) {
								this.recomendList = res.data.data
							} else {
								uni.showToast({
									icon: 'none',
									title: '获取数据失败！'
								});
							}
						})
					},
					opentable() {
						// #ifdef APP-PLUS
						uni.navigateTo({
							url: './table',
							animationType: 'pop-in',
							animationDuration: 200
						})
						// #endif
						// #ifdef H5
						uni.navigateTo({
							url: './table'

						})
						// #endif
					},
					// 跳转到详情页
					toDetail(goods_id, store_id) {

					},
					// 加入购物车
					addShopCar(e) {
						// 成功的话，调用加入购物车动画
						this.eposition=e
					},
					gocomment() {
						uni.navigateTo({
							url: './comment'
						})
					},
					godetail() {
						// #ifdef APP-PLUS
						uni.navigateTo({
							url: './restaurantdetail',
							animationType: 'pop-in',
							animationDuration: 200
						})
						// #endif
						// #ifdef H5
						uni.navigateTo({
							url: './restaurantdetail'

						})
						// #endif
					},
					previewImage(index) {
						// const url = this.list.map((i) => {
						// 	return i.imgurl
						// })
						// const current = this.list[index].image
						// uni.previewImage({
						// 	current: current,
						// 	urls: url,
						// 	indicator: "default",
						// 	loop: true
						// }
						let dishid=this.list[index].dishid
						console.log(dishid,'sdsdsd');
						uni.navigateTo({
							url: '../detail/detail?id='+dishid,
							animationType: 'pop-in',
							animationDuration: 200
						})

					},

			}
		}
</script>

<style lang="scss">
	@import '../../common/css/pubu.css';
	.orderDishes-add {
		color: #ffffff;
		height: 75rpx;
		background-color: red;
		line-height: 75rpx;
		text-align: center;
		position: absolute;
		bottom: 0;
		width: 100%;
	}
.orderDishes-type {
		padding: 40rpx;
		max-height: calc(100% - 160rpx);
		overflow: scroll;

		&>view:nth-child(1) {
			display: flex;
			align-items: center;
			padding-bottom: 30rpx;

			image {
				width: 140rpx;
				height: 125rpx;
				border-radius: 10rpx;
			}

			&>view {
				font-size: 30rpx;
				padding-left: 20px;

				&>view:nth-child(2) {
					font-size: 26rpx;
					padding-top: 30rpx;
					color: red;
				}
			}
		}
	}
	.pb-car {
		float: right;
		color: #FD395B;
		width: 50upx;
		height: 50upx;
		border-radius: 50%;
		text-align: center;
		margin-right: 8upx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// 
	.text {
		font-size: 15px;
	}

	.comment {
		display: flex;
		background: rgba(0, 0, 0, 0.6);
		width: 300rpx;
		height: 80rpx;
		color: white;
		align-items: center;
		border-radius: 10rpx;
		justify-content: space-between;
		position: absolute;
		bottom: 134rpx;
		right: 20rpx;
		padding: 10rpx;
	}

	text:first-child {
		font-size: 28px;
	}

	.lunbo {
		position: relative;
	}

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
</style>
